@import '@/uni.scss';
::v-deep.uContainer {
	background: $uni-bg-color;
}
::v-deep.uni-file-picker {
	width: 400rpx !important;
	flex: unset !important;
}
::v-deep.uni-select--disabled {
	background: transparent !important;
}

.container {
	width: 100%;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	.listScroll {
		width: 100%;
		height: calc(100% - 90rpx - 60rpx);
		overflow: auto;
		.list {
			padding: 30rpx;
			padding-bottom: env(safe-area-inset-bottom);
			width: calc(100% - 60rpx);
			display: flex;
			flex-direction: column;
			align-items: center;
			.orderItem {
				margin-bottom: 20rpx;
				padding: 20rpx;
				width: calc(100% - 40rpx);
				min-height: 368rpx;
				background: #fff;
				box-shadow: 0 0 10rpx #fff inset;
				border-radius: 10rpx;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				> .orderNo {
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					.noTxt {
						display: flex;
						flex-direction: row;
						align-items: baseline;
						> text {
							font-weight: 400;
							font-size: 28rpx;
							color: $uni-main-color;
						}
						> text:first-child {
							font-size: 24rpx;
						}
					}
					> .statusTip {
						margin-left: auto;
						font-weight: bold;
						position: relative;
						> text {
							font-weight: 400;
							font-size: 30rpx;
							color: $uni-main-color;
						}
						> .invalidTime {
							position: absolute;
							top: 100%;
							right: 0;
							width: max-content;
							font-weight: 300;
							font-size: 24rpx;
							color: $xxf-red;
							text-align: end;
						}
					}
				}
				.orderLine {
					margin: 20rpx 0;
					width: 100%;
					height: 2rpx;
					background: $uni-bg-color;
				}
				.orderProduct {
					margin: 6rpx 0;
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					.thumb {
						width: 120rpx;
						height: 120rpx;
					}
					.info {
						width: calc(100% - 150rpx);
						display: flex;
						flex-direction: column;
						.name {
							width: 100%;
							> text {
								font-weight: 400;
								font-size: 28rpx;
								color: $uni-main-color;
							}
						}
						.nameSub {
							margin-top: 20rpx;
							width: 100%;
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: baseline;
							.price {
								flex: 1;
								display: flex;
								flex-direction: row;
								justify-content: flex-start;
								align-items: baseline;
								> text {
									font-weight: 300;
									font-size: 24rpx;
									color: $uni-secondary-color;
								}
								> text:nth-child(1) {
									font-weight: 400;
									color: $xxf-red;
								}
								> text:nth-child(2) {
									font-weight: 400;
									font-size: 28rpx;
									color: $xxf-red;
								}
								> text:last-child {
									text-decoration: line-through;
								}
							}
							.num {
								> text {
									font-weight: 400;
									font-size: 28rpx;
									color: $xxf-red;
								}
							}
						}
					}
				}
				.orderAmount {
					margin-top: 20rpx;
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					align-items: baseline;
					flex-wrap: wrap;
					> text {
						font-weight: 400;
						font-size: 26rpx;
						color: $uni-main-color;
					}
					> .need {
						> text {
							font-weight: 400;
							font-size: 26rpx;
							color: $uni-main-color;
						}
						> text:last-child {
							font-weight: bold;
							font-size: 36rpx;
							color: $xxf-red;
						}
					}
				}
				.orderAction {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					.orderTime {
						margin-right: auto;
						> text {
							font-weight: 400;
							font-size: 24rpx;
							color: $uni-extra-color;
						}
					}
					.actionBtn {
						margin-left: 20rpx;
						width: 156rpx;
						height: 56rpx;
						background: #000;
						border-radius: 34rpx;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						> text {
							font-weight: 400;
							font-size: 26rpx;
							color: #fff;
						}
					}
					.redBtn {
						background: $xxf-red;
					}
					.greenBtn {
						background: $xxf-logo;
					}
					.grayBtn {
						background: $uni-base-color;
					}
					.blueBtn {
						background: $xxf-blue;
					}
				}
			}
		}
	}
}
